import React, { Component } from 'react'
import { Table } from 'antd';
import JsonData from './inner_component.json';

export default class TableJSONUse extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
        }
    }
    componentDidMount() {
        this.addData();
    }

    // 加载数据
    addData = () => {
        let data = []
        JsonData.forEach((item, index) => {
            data.push({
                id: item.id,
                key: item.key,
                name: item.name,
                type: item.type,
                category: item.category,
                data_type: item.data_type,
                is_default: item.is_default.toString(),
                description: item.description,
            });
        })
        this.setState({ data })
    }
    render() {
        const { data } = this.state
        const columns = [
            {
                title: 'id',
                align: 'center',
                dataIndex: 'id',
            },
            {
                title: 'key',
                align: 'center',
                dataIndex: 'key',
            },
            {
                title: 'name',
                align: 'center',
                dataIndex: 'name',
            },
            {
                title: 'type',
                align: 'center',
                dataIndex: 'type',
            },
            {
                title: 'category',
                align: 'center',
                dataIndex: 'category',
            },
            {
                title: 'data_type',
                align: 'center',
                dataIndex: 'data_type',
            },
            {
                title: 'is_default',
                align: 'center',
                dataIndex: 'is_default',
            },
            {
                title: 'description',
                align: 'center',
                dataIndex: 'description',
            }
        ];
        return (
            <div>
                <button className='returnButton'><a href="/">点击返回主菜单</a></button>
                <h1>TableJSONUse</h1>
                <p>该组件读取本地JSON，可以快速显示数据。</p>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={data}
                />
            </div>
        )
    }
}
